$(function () {
    var username = $("#username");
    var password = $("#password");
    var email = $("#email");
    var phone = $("#phone");
    var ckb = $("#ckb");
    var sub = $("#sub");
    var loginBtn = $(".login-btn");
    var inp = $('#myform>input');
    var n = 0; //用来判断checkbox的点击次数
    var reg = {
        'username': /^\w{4,8}$/,
        'password': /^.{6,16}$/,
        'dbpwd': /^.{6,16}$/,
        'email': /^\w{3,}@[A-z0-9]{2,}\.[A-z]{2,}\.?[A-z]*$/,
        'phone': /^1[356789]\d{9}$/
    };
    // 输入框后的图标iconfont
    var i = ["#uid", "#pwdid", "#dbpwdid", "#eid", "#phid"];

    $("#myform>input[class!='notInp']").on("change", function () {
        // 如果正则匹配成功
        if (reg[$(this).attr("id")].test($(this).val())) {
            // 如果输入框ID是用户名，就匹配数据库用户名
            if ($(this).attr("id") == "username") {
                $.ajax({
                    type: "get",
                    url: "../lib/hasName.php?username=" + username.val(),
                    dataType: "json",
                    success: function (response) {
                        // 如果数据库不存在该用户名，显示绿色对勾图标
                        if (response.register) {
                            $("#uid").removeClass("red").addClass("green").html("&#xe639;").css("color", "green");
                        } else {
                            // 如果数据库存在改用户名，显示红色闪电图标
                            $("#uid").removeClass("green").addClass("red").html("&#xe605;").css("color", "red");
                            alert("该用户名已存在");
                        }
                    }
                });
            } else if ($(this).attr("id") == "dbpwd") {
                // 如果是确认密码框，则要保证与密码框的内容一致
                if ($(this).val() === $("#password").val()) {
                    $("#dbpwdid").removeClass("red").addClass("green").html("").html("&#xe639;").css("color", "green");
                } else {
                    $("#dbpwdid").removeClass("green").addClass("red").html("").html("&#xe605;").css("color", "red");
                }
            } else {
                // 如果是其他输入框，显示绿色对勾图标
                $(i[inp.index($(this))]).removeClass("red").addClass("green").html("&#xe639;").css("color", "green");
            }
        } else {
            // 如果正则匹配不成功，显示红色闪电图标
            $(i[inp.index($(this))]).removeClass("green").addClass("red").html("&#xe605;").css("color", "red");
        }
    })

    ckb.on("click", function () {
        n++;
    })

    sub.on("click", function () {
        event.preventDefault();
        var j, count = 0;
        // 判断五个输入框全都验证正确
        for (j = 0; j < 5; j++) {
            if ($(i[j]).hasClass("green")) {
                count++;
            }
        }
        // 当全部正确且协议勾选时即为注册成功
        if (count == 5 && n % 2) {
            $.ajax({
                url: "../lib/register.php",
                type: "post",
                data: JSON.stringify({
                    username: username.val(),
                    password: password.val(),
                    email: email.val(),
                    phone: phone.val()
                }),
                dataType: "json",
                success: function (res) {
                    if (res.register) {
                        alert("注册成功！");
                        location.href = "../html/login.html";
                    }
                }
            });
        } else {
            alert("对不起，您有信息未填写或不正确，请检查！");
        }
    })
    loginBtn.on("click", function () {
        location.href = "../html/login.html";
    })
})